<html>
<head>
<link href="/static/css/bootstrap.css" rel="stylesheet">
<link href="/static/css/bootstrap-theme.css" rel="stylesheet">
<script src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap.js"></script>
	<!-- scrf token-->
<script type="text/javascript" src="/static/js/csrf.js"></script>

<script src="/static/js/vue.js"></script>

<title>{% block title %}首页{% endblock %}</title>
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
		<a class="navbar-brand" href="#">My First Page</a>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a href="#">首页</a></li>
		<li><a href="#">待办事项</a></li>
		{% if request.user.is_authenticated %}
		<li><a href="#">当前用户：{{ request.user.name }}</a> </li>
		<li class="dropdown">
			<a href="#" class="dropdowm-toggle" data-toggle="dropdown">
				个人中心<b class="caret"></b>
				</a>
			<ul class="dropdowm-menu">
			<li><a href="#">定制工具</a></li>
			<li><a href="#">?</a></li>
			<li><a href="#">?</a></li>
			<li class="divider" ></li>
			<li><a href="#">修改个人信息</a></li>
			<li class="divider" ></li>
			<li> <a href="/accounts/logout/">登出</a> </li>
		</ul>
	    </li>
		{% else %}
		<li><a href="/accounts/login/">登录</a> </li>
		<li><a href="/accounts/register/">注册</a> </li>
	{% endif %}
	</ul>
	</div>
</div>
</nav>

<div class="container jumbotron">
<div class="col-md-8 col-md-offset-4">
	{% block content %}
	<div id="app" class="form-group">
		<p class="form-control" v-text="aaa"></p>
		<span>Input here:</span>
		<input class="form-control" v-model="aaa">
</div>
	{% endblock %}
{% for blog in blogs %}
	<article class="article">
		<h2><a href="#0"><b>{{ blog.name}}</b></a> </h2>{% load poll_extras %}
		<p class="small text-secondary">发表于{{ blog.created_at|datetime }}</p>
		<p class="text-secondary">{{ blog.content }}</p>
		<p><a href="/blog/{{ blog.id }}">继续阅读<i class="uk-icon-angle-double-right"></i> </a> </p>
	</article>
	<hr class="article-divider">
	{% empty %}
	<h2>暂无通知</h2>
{% endfor %}
</div>
</div>
<div class="container text-center jumbotron">
	<p>Powered By <a href="/admin">Django 1.11</a> </p>
	<p>Copyright 2017. DDD</p>

</div>

{% block vuejs %}
<script type="application/javascript">
	var vm = new Vue({
				el: '#app',
				data:{
					aaa:'',
				},
			});
</script>
{% endblock %}

</body>

</html>